        <div class="content">
            <div class="container-fluid">
                <div class="row">

                    <volist name="header" id="vo" key="k">  
                    <div class="col-md-2">
                        <div class="card p-4">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="h4 d-block font-weight-normal mb-2">{$vo}</span>
                                    <span class="font-weight-light">{$key}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    </volist>
                </div>

                <div class="row ">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                任务达标数量走势图
                            </div>

                            <div class="card-body p-0">
                                <div class="p-4">
                                    <canvas id="line-chart" width="100%" height="20"></canvas>
                                </div>

                                <div class="justify-content-around mt-4 p-4 bg-light d-flex border-top d-md-down-none">
                                    <volist name="task" id="vo" key="k">  
                                        <div class="text-center">
                                            <div class="text-muted small">{$vo}</div>
                                            <div>{$key}</div>
                                        </div>
                                     </volist>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                任务消费金额走势图
                            </div>

                            <div class="card-body p-0">
                                <div class="p-4">
                                    <canvas id="line-chart2" width="100%" height="20"></canvas>
                                </div>

                                <div class="justify-content-around mt-4 p-4 bg-light d-flex border-top d-md-down-none">
                                    <volist name="amount" id="vo" key="k">  
                                        <div class="text-center">
                                            <div class="text-muted small">{$vo}</div>
                                            <div>{$key}</div>
                                        </div>
                                    </volist>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<script type="text/javascript">
    $(document).ready(function () {
    /**
     * Line Chart
     */
    var line = {$line};

    var lineChart = $('#line-chart');

    if (lineChart.length > 0) {
        new Chart(lineChart, {
            type: 'line',
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10","11", "12", "13", "14", "15", "16", "17", "18", "19", "20","21", "22", "23", "24", "25", "26", "27", "28", "29", "30","31"],
                datasets: [{
                    label: '上月',
                    data: line.line.linep,
                    backgroundColor: 'rgba(66, 165, 245, 0)',
                    borderColor: '#CD2626',
                    borderWidth: 1
                },{
                    label: '本月',
                    data: line.line.linen,
                    backgroundColor: 'rgba(66, 165, 245, 0)',
                    borderColor: '#7CCD7C',
                    borderWidth: 1
                }
                ]
            },


            options: {
                legend: {
                    display:true
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    }



    /**
     * Line Chart
     */
    var lineChart2 = $('#line-chart2');

    if (lineChart2.length > 0) {
        new Chart(lineChart2, {
            type: 'line',
            data: {
                labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10","11", "12", "13", "14", "15", "16", "17", "18", "19", "20","21", "22", "23", "24", "25", "26", "27", "28", "29", "30","31"],
                datasets: [{
                    label: '上月消费金额',
                    data: line.line2.linep,
                    backgroundColor: 'rgba(66, 165, 245, 0)',
                    borderColor: '#CD2626',
                    borderWidth: 1
                },{
                    label: '本月消费金额',
                    data: line.line2.linen,
                    backgroundColor: 'rgba(66, 165, 245, 0)',
                    borderColor: '#7CCD7C',
                    borderWidth: 1
                }
                ]
            },
            options: {
                legend: {
                    display: true
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    }
});
</script>
